<ui:composition 
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">

    <p:dataTable id="tCatalogo" var="i" value="#{catalogoBean.catalogo}"
                 rendered="#{catalogoBean.tipoVista == 'T' and not empty catalogoBean.catalogo}"
                 paginator="true" rows="15" emptyMessage="No se encontraron productos"
                 widgetVar="catalogo"
                 rowsPerPageTemplate="15,30,45"
                 styleClass="vistaDetalle" >

        <f:facet name="footer">

            <h:outputText value="+ de 500 Productos encontrados" styleClass="headerTable"
                          rendered="#{catalogoBean.cantidadRegistros==500}"/>

            <h:outputText value="#{catalogoBean.cantidadRegistros} Productos encontrados" styleClass="headerTable"
                          rendered="#{500>catalogoBean.cantidadRegistros}" />
        </f:facet>

        <p:column width="100" >
            <div  class="contProdDet">
            
                <div id="divFavorito" class="contIconFav" >
                    <p:commandButton  icon="iconoFavorito" style="width:25px; height:20px;"
                                      title="Agregar a favoritos"
                                      rendered="#{not i.favorito}"
                                      actionListener="#{favoritosBean.agregarFavorito(i)}" 
                                      update=":formulario:gCatalogo, :formulario:divDetalle " >
                    </p:commandButton> 

                    <p:commandButton  icon="iconoFavoritoOk" style="width:25px; height:20px;"                                  
                                      actionListener="#{favoritosBean.eliminarFavorito(i)}"
                                      rendered="#{i.favorito}" 
                                      title="Quitar de favoritos"
                                      update=":formulario:gCatalogo, :formulario:divDetalle " >
                    </p:commandButton>                
                </div>
                        
                <p:lightBox widgetVar="selectIframe" id="lightbox1" rendered="#{not empty i.imggra}" >

                    <h:outputLink value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.imggra}.jpg"  title="#{i.descrp}">
                        <p:graphicImage styleClass="imgProductoDet"  value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.imgchi}.jpg"  
                                        rendered="#{not empty i.imgchi}" alt="Imagen producto Intercap Argentina" />
                    </h:outputLink>

                </p:lightBox>
                
                <p:graphicImage styleClass="imgProductoDet" value="#{aplicacionBean.parametro.pathImagenesProductos}#{i.imgchi}.jpg" 
                                rendered="#{not empty i.imgchi and empty i.imggra}" />

                <p:graphicImage styleClass="imgProductoDet" value="#{aplicacionBean.parametro.pathImagenesProductos}intercap.jpg"  rendered="#{empty i.imgchi}"
                                style="border: 1px solid lightgrey;" />

            </div>
        </p:column>

        <p:column styleClass="colCatalogo" headerText="Código" style="text-align: center;" sortBy="#{i.codigo}" width="75" >

            <h:outputText value="#{i.codigo}"  />
            <br/>
            <h:outputText value="(#{i.nroParte})" rendered="#{not empty i.nroParte}" />

        </p:column>

        <p:column headerText="Descripción" sortBy="#{i.descrp}"  >

            <div style="width: 100%; height: 100%; float: left; position: relative; ">
                <h:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/new.gif" rendered="#{i.pnuevo=='S'}"/>
                <span itemprop="makesOffer"><h:outputText value="#{i.descrp}" style="font-weight: bold;" /></span>
            </div>
            <div style="width: 100px; height: 100%; float: left; margin-top: 5px;  position: relative;">
                <h:outputText value="Origen: " rendered="#{i.importado == 'N'}"  />
                <h:outputText value="Nacional" rendered="#{i.importado == 'N'}" />
                <h:outputText value="Origen: " rendered="#{i.importado == 'S'}"  />
                <h:outputText value="Importado" rendered="#{i.importado == 'S'}" />
            </div>

            <div style="width:auto; text-indent:5px; height:auto; float: left; margin-top: 5px;  position: relative; ">
                <h:outputText value="Presentación: "  />
                <h:outputText value="#{i.unidadConversion} #{i.factorConversion} #{i.unidadMedida}" />
            </div>

            <div style="width: 130px; height: 100%; float: left; margin-top: 5px;  position: relative; ">
                <h:outputText value="Marca: "/>
                <h:outputText value="#{i.marca}" />
            </div>

        </p:column>

        <p:column width="55" style="text-align: right;" sortBy="#{i.precioFinal}" rendered="#{usuarioSessionBean.estaRegistrado}"  >

            <f:facet name="header">
                <div style="text-align: center;">
                    <h:outputText value="$ Venta" />
                    <br/>
                    <h:outputText value="c/I.V.A." />
                </div>
            </f:facet>

         <!-- ocultar para video -->
            <h:outputText value="#{i.precioFinal*monedaBean.cotizacionDelDia.cotizacion/monedaBean.moneda.cotizacion}"
                          style="#{i.conVariacionPrecio=='S'?'font-weight: bold; color: #0066cc;':''}"
                          rendered="#{i.moneda == 'USD'}" >
                    <f:convertNumber pattern=" ##,##0.00" />
            </h:outputText>

            <h:outputText value="#{i.precioFinal/monedaBean.moneda.cotizacion}"
                          style="#{i.conVariacionPrecio=='S'?'font-weight: bold; color: #0066cc;':''}"
                          rendered="#{i.moneda == 'ARS'}" >
                    <f:convertNumber pattern=" ##,##0.00" />
            </h:outputText>
            
            <h:graphicImage id="varpre" value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/icono-variacion.png" rendered="#{i.conVariacionPrecio=='S'}"
                            style="margin-left: 2px;"/>
            <p:tooltip for="varpre" value="Este producto ha sufrido variación de precios en los últimos 30 días"
                       style="width: 200px;"/>
            
        </p:column>

        <p:column rendered="#{catalogoBean.porcMarcacion>0 and usuarioSessionBean.estaRegistrado}" width="55" style="text-align: right;" >

            <f:facet name="header" >
                <div style="text-align: center;">
                    <h:outputText value="$ Marcado" />
                    <br/>
                    <h:outputText value="c/I.V.A." />
                </div>
            </f:facet>

            <h:outputText value="#{i.precioFinal*monedaBean.cotizacionDelDia.cotizacion/monedaBean.moneda.cotizacion + ((i.precioFinal*monedaBean.cotizacionDelDia.cotizacion/monedaBean.moneda.cotizacion)*catalogoBean.porcMarcacion/100 )   }"
                          rendered="#{i.moneda == 'USD'}" >
                    <f:convertNumber pattern=" ##,##0.00" />
            </h:outputText>

            <h:outputText value="#{i.precioFinal/monedaBean.moneda.cotizacion + ((i.precioFinal/monedaBean.moneda.cotizacion)*catalogoBean.porcMarcacion/100 )   }"
                          rendered="#{i.moneda == 'ARS'}" >
                    <f:convertNumber pattern=" ##,##0.00" />
            </h:outputText>
          
        </p:column>

        <p:column style="text-align: center;" headerText="Stock" width="56"
                  rendered="#{usuarioSessionBean.estaRegistrado}" >

             <h:outputText value="A pedido" rendered="#{1 > i.stockTotal and not(i.productoApedido =='S')and(i.pnuevo=='S')}" />
             <h:outputText value="A pedido" rendered="#{i.productoApedido=='S'}" />

             <h:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/stock-bajo.gif" width="14" height="30"
                            rendered="#{1 > i.stockTotal and not(i.productoApedido=='S') and (i.pnuevo=='N') }" />

             <h:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/stock-medio.gif" width="14" height="30"
                             rendered="#{(i.stockMinimo >=  i.stockTotal ) and ( i.stockTotal > 0 ) and not(i.productoApedido=='S')}" title="Existen cantidades en niveles próximos a agotarse" />
             
             <div style="padding: 2px;">
             <h:outputText value="#{i.stockTotal}" 
                           rendered="#{(i.stockMinimo >=  i.stockTotal ) and ( i.stockTotal > 0 ) and not(i.productoApedido=='S')}" >
                 <f:convertNumber pattern="0" />
             </h:outputText>
             <h:outputText value=" #{i.unidadMedida}" rendered="#{(i.stockMinimo >=  i.stockTotal ) and ( i.stockTotal > 0 ) and not(i.productoApedido=='S')}"/>
             </div>
             
             <h:outputText value="Stock próximo a agotarse" rendered="#{(i.stockMinimo >=  i.stockTotal ) and ( i.stockTotal > 0 ) and not(i.productoApedido=='S')}"/>
             
             
             <h:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/stock-alto.gif" width="14" height="30"
                             rendered="#{i.stockTotal > i.stockMinimo and not(i.productoApedido=='S') }" />

        </p:column>

        <p:column styleClass="colOpProd" style="font-size: 9.5px; text-align: center;"  width="80">
              <div class="opProd">
             
            
            <div class="divagregar">
         
                <p:commandButton  id="btnAgregar" icon="btnAgregar" style="top:0% !important;   margin-right:5px; "
                                  action="#{catalogoBean.verConfirmarCantidad(i)}"
                                  process="@this"
                                  update=":formulario:confirmarCantidad,:formulario:bannersVerticales"
                                  title="Agregar este producto al carrito de compras"
                                  rendered="#{usuarioSessionBean.estaRegistrado and not i.seleccionado}"
                                  oncomplete="PF('dlgCantidad').show();  btnAceptar.focus(); " >

                </p:commandButton>
               


                <p:commandButton  id="btnDelete" icon="btnDelete" style="top:0% !important;"
                                  action="#{catalogoBean.seleccionarItemCatalogo(i,true)}"
                                  process="@this"
                                  update=":formulario:confirmarBorrado"
                                  title="Borrar este producto del carrito de compras"
                                  rendered="#{usuarioSessionBean.estaRegistrado and (i.seleccionado)}"

                                  oncomplete="PF('dlgConfirmarBorrado').show(); btnBorrar.focus()">
                </p:commandButton>
               
    
            </div>
                  
            <div class="btnOpc">
            
            <div class="btnSustitutos" style="position: absolute; right:30px;">
                <p:commandButton id="btnSustitutos" icon="btnSustitutosI" style="float:left;"                                 
                                 disabled="#{i.tieneSustitutos == 'N'}"
                                 title="Ver productos sustitutos/sugeridos"
                                 actionListener="#{catalogoBean.seleccionarItemCatalogo(i,true)}"
                                 update=":formulario:verSustitutos,:formulario:bannersVerticales"
                                 oncomplete="PF('dlgSustitutos').show()"
                                 process="@this" >
                </p:commandButton>
               
            </div>
            
            <div class="btnRelacionados" style="position: absolute; right:5px;">
                <p:commandButton id="btnRelacionados" icon="btnRelacionadosI" style="float:left;"                                  
                                 disabled="#{i.tieneSugeridos == 'N'}"                           
                                 title="Ver productos relacionados"
                                 actionListener="#{catalogoBean.seleccionarItemCatalogo(i,true)}"
                                 update=":formulario:verSugeridos,:formulario:bannersVerticales"
                                 oncomplete="PF('dlgSugeridos').show()"
                                 process="@this" >
                </p:commandButton>
              
            </div>
            
            <div class="btnPendiente" style="position: absolute; right:5px; bottom:0px;"  >
                <p:commandButton id="btnPendiente" icon="btnPendientesI" style="float:left;"
                                 rendered="#{usuarioSessionBean.estaRegistrado}"
                                 disabled="#{i.tienePendiente == 'N'}"
                                 title="Este producto se encuentra en sus pedidos pendientes"
                                 actionListener="#{catalogoBean.verProductosPendientes(i)}"
                                 process="@this"
                                 update=":formulario:pedidosPendientes"
                                 oncomplete="PF('dlgPedidosPendientes').show();" >
                </p:commandButton>
                
            </div>
             
            <div class="btnMasInfo" style="position: absolute; right:30px; bottom:0px;" >
                
                <p:commandButton id="btnFichaProducto" icon="btnMasInfoI" style="float:left;" 
                                 title="Ver la ficha del producto"
                                 action="#{catalogoBean.verFichaProducto(i)}"                                 
                                 process="@this" >
                </p:commandButton>
                
                <!--
                <p:remoteCommand name="verFicha" actionListener="#{catalogoBean.verFichaProducto(i)}" />                
                <h:outputLink id="lnkVerFicha" value="#{request.contextPath}/producto/#{i.descrp}" onclick="verFicha()" >                    
                    Ver ficha
                </h:outputLink>
                <p:tooltip for="lnkVerFicha" value="Ver la ficha del producto"  showEffect="fade" hideEffect="fade" />
                -->
              
            </div>
                
            
            </div> <!-- fin btnOpc -->
            
            </div> <!-- fin opProd -->

        </p:column>
        
    </p:dataTable>
    
    <!--
    <p:remoteCommand name="rc" update="msgs" actionListener="#{remoteCommandView.execute}" />     
    <p:commandButton type="button" onclick="rc()" value="Execute" icon="ui-icon-refresh" />
    -->
    
    
            

</ui:composition>
